<template>
  <div class="msgleft3top"
    :style="`${smallPhone ? 'flex: none;height:50px' : 'flex:5%'};${IsdarkMode ? 'border-bottom: 1px solid #484c4e;' : 'border-bottom: 1px solid #e6e5e5;'}`">
    <div v-if="current != null" style="display: flex; align-items: center">
      <h3 :style="`padding-left:${smallPhone ? '12px' : '15px'}`" title="点击修改对话名" v-if="!isshowEdit"
        @click.stop="editcurrentNameClick()" class="msgleft3toptitle">
        {{ current.currentName }}
      </h3>
      <input v-focus @click.stop="isshowEdit = true" @blur="isshowEdit = false" v-show="isshowEdit" style="
          border: 0;
          outline: none;
          width: 98px;
          height: 20px;
          margin-left: 8px;
          font-size: 12px;
        " v-model="editcurrentName" @input.stop="inputhandleChange" ref="myInput" type="text" />
      <span v-show="current.IsAI">当前
        {{ ReqMessagesCount }}
        条上下文
      </span>

      <div v-if="current.uuid == 2" style="
          display: flex;
          align-items: center;
          height: 100%;
          margin-left: 8px;
        ">
        <svg style="width: 21px; height: 21px" t="1687139950737" class="icon" viewBox="0 0 1024 1024" version="1.1"
          xmlns="http://www.w3.org/2000/svg" p-id="1566" width="32" height="32">
          <path
            d="M401.30892 960.182765c-226.542584 0-336.631614-52.980346-336.631614-162.209306 0-76.718293 114.389384-127.118428 229.982866-144.663867l0-6.536536c-86.351083-66.053418-97.876029-184.055098-97.876029-281.071057 0-132.106837 77.750378-211.061314 208.137074-211.061314l6.880564 0c130.386696 0 208.137074 78.954477 208.137074 211.061314 0 97.015958-11.524945 214.845624-97.876029 281.071057l0 6.536536c115.593482 17.545439 229.982866 67.77356 229.982866 144.663867C752.045691 872.11154 691.152696 960.182765 401.30892 960.182765zM404.921216 218.801949c-95.639845 0-144.147825 49.540064-144.147825 147.072065 0 91.339493 9.804804 190.763649 83.082815 237.379473 9.288762 5.84848 14.793214 15.997312 14.793214 27.006215l0 51.260205c0 16.341341-12.385016 30.102469-28.554342 31.82261-121.097934 12.729044-201.428523 59.344868-201.428523 84.630942 0 65.193348 91.683521 98.220057 272.642365 98.220057 182.162943 0 286.747522-35.778935 286.747522-98.220057 0-25.286074-80.33059-71.901898-201.428523-84.630942-16.341341-1.720141-28.554342-15.48127-28.554342-31.82261l0-51.260205c0-11.008903 5.676466-21.157736 14.793214-27.006215 73.105997-46.615824 83.082815-146.211994 83.082815-237.379473 0-97.532001-48.507979-147.072065-144.147825-147.072065L404.921216 218.801949 404.921216 218.801949z"
            fill="#575B66" p-id="1567"></path>
          <path
            d="M899.117756 763.742651c-17.717453 0-31.994625-14.277171-31.994625-31.994625 0-24.426004-91.167479-83.942886-196.956157-95.123803-16.341341-1.720141-28.726356-15.48127-28.726356-31.82261L641.440618 538.404166c0-11.008903 5.676466-21.157736 14.793214-27.006215 82.738787-52.636318 91.683521-169.777927 91.683521-217.769864 0-110.433059-74.654124-133.654964-137.26726-133.654964-17.717453 0-31.994625-14.277171-31.994625-31.994625s14.277171-31.994625 31.994625-31.994625c124.194188 0 201.256509 75.686209 201.256509 197.644213 0 55.732572-10.664875 188.699479-106.476734 261.289434l0 22.18982c102.176382 18.577524 225.682513 79.986561 225.682513 154.640685C931.284394 749.46548 916.835209 763.742651 899.117756 763.742651z"
            fill="#575B66" p-id="1568"></path>
        </svg>
        <span style="margin: 0; margin-left: 1px">在线人数{{ OnlineCount + 10 }}</span>
      </div>
    </div> 
    <!-- 非对话 --> 
    <div v-else style="display: flex; align-items: center">
      <h3 :style="`padding-left:${smallPhone ? '12px' : '15px'};display: flex;align-items: center;`" title=""
        v-show="!isshowEdit" @click.stop="goback()" class="msgleft3toptitle">
        <svg v-show="TopTitle == '个人中心'" :style="`width: 20px;height: 20px;fill: ${IsdarkMode?`${SelectMycolor}`:'#000000'}`" t="1688908152943" class="icon"
          viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3517" width="200" height="200">
          <path
            d="M671.968 912c-12.288 0-24.576-4.672-33.952-14.048L286.048 545.984c-18.752-18.72-18.752-49.12 0-67.872l351.968-352c18.752-18.752 49.12-18.752 67.872 0 18.752 18.72 18.752 49.12 0 67.872l-318.016 318.048 318.016 318.016c18.752 18.752 18.752 49.12 0 67.872C696.544 907.328 684.256 912 671.968 912z"
             p-id="3518"></path>
        </svg>

        {{ TopTitle }}
      </h3>
    </div>
    <!-- AI Words -->
    <div style="display: flex; align-items: center">
      <!-- 通知 -->
      <div style="
          width: 30px;
          height: 30px;
          display: flex;
          align-items: center;
          margin-right: 12px;
          position: relative;
        " @mouseenter="IsShowCommentInfos = true" @mouseleave="IsShowCommentInfos = false">
        <svg style="width: 23px; height: 23px" t="1687940398856" class="icon" viewBox="0 0 1024 1024" version="1.1"
          xmlns="http://www.w3.org/2000/svg" p-id="50699" width="200" height="200">
          <path
            d="M593.26464 860.16l2.37568 0.12288c12.4928 1.37216 21.2992 13.312 18.08384 25.4976l-1.24928 4.38272C599.32672 932.08576 559.3088 962.56 512 962.56l-4.87424-0.1024c-46.77632-2.08896-85.58592-33.97632-96.8704-76.67712l-0.45056-2.27328c-1.76128-12.12416 8.00768-23.3472 20.93056-23.3472h162.52928zM512 61.44a30.72 30.72 0 0 1 30.72 30.72v32.23552c157.45024 15.83104 276.48 154.29632 276.48 314.368V655.36l0.12288 3.072A40.96 40.96 0 0 0 860.16 696.32h7.31136l3.4816 0.1024c25.3952 1.59744 47.84128 20.33664 50.3808 45.81376l0.22528 3.2768A51.2 51.2 0 0 1 870.42048 798.72H156.52864l-3.4816-0.1024c-25.3952-1.59744-47.84128-20.33664-50.3808-45.81376l-0.22528-3.2768A51.2 51.2 0 0 1 153.6 696.32H163.84l3.072-0.1024A40.96 40.96 0 0 0 204.8 655.36V430.08c0-159.29344 121.2416-290.26304 276.48-305.68448V92.16A30.72 30.72 0 0 1 512 61.44z"
            fill="#636363" p-id="50700"></path>
        </svg>

        <div style="
            background-color: #3276d2;
            width: 14px;
            height: 14px;
            display: flex;
            padding: 1px;
            box-sizing: border-box;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            font-size: 12px;
            font-family: KaiTi;
            color: #fff;
            position: absolute;
            right: 0px;
            top: 0px;
          ">
          {{ CommentInfos.length }}
        </div>

        <div @mouseenter.stop="IsShowCommentInfos = true" :style="`
            display: flex;
            border-radius: 5px;
            color: #e4e5e7;
            font-family: Kaiti;
            position: absolute;
            right: ${smallPhone ? '15px' : '15px'};
                    top: 28px;
                    flex-direction: column;
                    width: ${smallPhone ? '180px' : '280px'};
            padding: 0 8px;
            padding-top: 8px;
            padding-bottom: 8px;
            max-height: 430px;
            overflow-y: auto;
            background-color: #42485a;
            z-index: 999999999999999999;`" v-show="IsShowCommentInfos" class="replyJournal">
          <!-- v-for="item in CommentInfos" -->
          <div @mouseenter.stop="IsShowCommentInfos = true" class="replyJournalItem" v-for="(item, index) in CommentInfos"
            @click="OrientationJournal(item)" :key="index" @mouseover="CommentColseActiveIndex = index"
            @mouseleave="CommentColseActiveIndex = -1">
            <div class="replyJournalItem_son" style="
                display: flex;
                border-bottom: 1px solid #535a6c;
                padding-bottom: 5px;
              ">
              <div style="display: flex;flex-direction: column;position: relative;">
                <img style="width: 30px; height: 30px; border-radius: 6px" :src="item.imgUrl" alt="" />
                <div v-show="CommentColseActiveIndex == index" title="关闭当前对话" @click.stop="SigCommentColse(item)"
                  class="colse"
                  style="position: absolute;bottom: 0px;left: 8px;display: flex;align-items: flex-end;padding-bottom: 1px;">
                  <svg style="width: 15px;height: 15px;" t="1682648595539" class="icon" viewBox="0 0 1024 1024"
                    version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10509" width="200" height="200">
                    <path
                      d="M85.333333 512C85.333333 276.352 276.309333 85.333333 512 85.333333c235.648 0 426.666667 190.976 426.666667 426.666667 0 235.648-190.976 426.666667-426.666667 426.666667-235.648 0-426.666667-190.976-426.666667-426.666667z m426.666667-30.165333l-105.685333-105.706667a21.269333 21.269333 0 0 0-30.08 0.106667 21.205333 21.205333 0 0 0-0.106667 30.08L481.834667 512l-105.706667 105.685333a21.269333 21.269333 0 0 0 0.106667 30.08 21.205333 21.205333 0 0 0 30.08 0.106667L512 542.165333l105.685333 105.706667a21.269333 21.269333 0 0 0 30.08-0.106667 21.205333 21.205333 0 0 0 0.106667-30.08L542.165333 512l105.706667-105.685333a21.269333 21.269333 0 0 0-0.106667-30.08 21.205333 21.205333 0 0 0-30.08-0.106667L512 481.834667z"
                      fill="#8a8a8a" p-id="10510"></path>
                  </svg>
                </div>
              </div>
              <div style="
                  display: flex;
                  flex-direction: column;
                  padding-left: 10px;
                ">
                <div style="
                    display: flex;
                    height: 20px;
                    align-items: self-start;
                    width: 100%;
                  ">
                  <span style="font-size: 15px; margin: 0; font-weight: 800">{{
                    item.sendName
                  }}</span>
                  <span style="font-size: 12px !important; color: #908e8e">{{
                    formatTime(item.time)
                  }}</span>
                </div>
                <div style="
                    display: flex;
                    flex-direction: column;
                    margin-top: 0px;
                    font-size: 13px;
                  ">
                  <div style="
                      margin-bottom: 3px;
                      white-space: nowrap;
                      overflow: hidden;
                      text-overflow: ellipsis;
                      max-width: 240px;
                    " class="commentInfos_Orgcontent">
                    {{ item.content.replace(/<\/?[^>]+>/g, "") }}
                  </div>
                  <div style="max-width: 250px">
                    {{
                        item.noticetype == 0
                        ? `${item.sendName}赞了${item.relationreceiveuuid == ThisLoginuuId
                          ? "我"
                          : item.receiveName
                        }的${item.msgs}`
                        : `回复${item.relationreceiveuuid == ThisLoginuuId
                          ? "我"
                          : item.receiveName
                          }：${item.msgs} `
                    }}
                  </div>

                  <div v-show="item.comment != ''" style="
                      display: flex;
                      margin-top: 4px;
                      margin: 0;
                      padding: 2px;
                      padding-bottom: 0;
                      width: 100%;
                    ">
                    <span style="
                        font-size: 12px;
                        margin-left: 0px;
                        border-left: 3px solid #929292;
                        padding-left: 3px;
                        color: rgb(144, 142, 142);
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        max-width: 230px;
                      ">引用：{{ item.comment }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- AI提示 -->
      <div @click.stop="ShowAIWords()" v-show="!smallPhone" style="
          margin-right: 12px;
          width: 30px;
          height: 30px;
          display: flex;
          align-items: center;
          justify-content: center;
        ">
        <svg style="width: 20px; height: 20px" t="1683717429242" class="icon" viewBox="0 0 1024 1024" version="1.1"
          xmlns="http://www.w3.org/2000/svg" p-id="10434" width="200" height="200">
          <path
            d="M939.358266 559.445367c-0.599941-0.999902-1.299873-1.899814-2.099795-2.799727-20.797969-23.497705-35.696514-51.394981-48.295284-80.69212-18.298213-42.59584-15.298506-82.091983-15.898447-125.887706-0.499951-34.996582-10.798945-78.592325-22.797774-111.089152-20.198028-54.794649-55.994532-99.290304-99.790255-133.686944C679.483644 40.296065 581.093253 0 472.403867 0 255.625037 0 80.042183 159.884386 80.042183 357.165121c0 13.198711 1.899814 39.396153 1.899815 39.396152 1.399863 85.491651 28.897178 187.281711 106.28962 301.57055 0 0 0 0.09999 0.09999 0.09999 1.199883 2.399766 31.896885 48.995215 14.198614 132.587052-2.199785 10.398984-12.298799 26.997364-25.897471 42.095889-19.498096 21.697881-14.498584 55.794551 10.298994 71.193048 74.492725 46.395469 161.48423 74.992676 254.675129 79.792208l53.594766 0.09999c16.89835-0.799922 33.596719-2.399766 49.995118-4.699541 7.599258-1.099893 13.898643-6.199395 16.498389-13.498682 13.098721-36.996387 49.495166-117.088566 119.888292-117.088565h104.489796c14.298604 0 29.097158-4.799531 33.99668-6.499366 1.299873-0.499951 2.499756-0.999902 3.699639-1.699834 17.09833-10.498975 17.698272-38.29626 14.898545-60.894053-2.199785-17.498291 3.999609-34.796602 16.198418-47.495362 5.499463-5.699443 8.59916-11.598867 8.59916-16.698369v-2.199785c0-10.698955-13.598672-19.898057-33.796699-24.797579-1.299873-0.299971-1.099893-2.299775 0.29997-2.299775 9.999024 0 19.198125-2.699736 25.797481-7.099307 6.599356-4.39957 10.798945-10.498975 10.798945-17.29831V699.931647c0-0.799922-0.09999-1.599844-0.19998-2.399765-1.199883-8.59916-1.399863-17.398301 0.499951-25.997462 5.699443-26.297432 14.798555-67.79338 17.198321-67.99336 75.392637-2.799727 60.194122-35.996485 55.2946-44.095693zM575.993751 261.974417c-25.797481 0-47.795332-15.198516-58.194317-36.996388l-133.186994 58.794259c2.799727 5.699443 4.999512 11.698858 6.599356 17.898252l32.096865-0.899912c3.799629-15.198516 17.598281-26.497412 33.99668-26.497412 19.298115 0 34.996582 15.698467 34.996583 34.996582s-15.698467 34.996582-34.996583 34.996582c-16.79836 0-30.796992-11.798848-34.19666-27.497314l-29.097159 0.799921c0.19998 2.499756 0.299971 5.099502 0.299971 7.699249 0 19.898057-6.099404 38.39625-16.298408 53.894736l90.391172 52.194903c5.899424-5.799434 13.798652-9.399082 22.597794-9.399082 17.798262 0 32.196856 14.398594 32.196855 32.196856 0 17.798262-14.398594 32.196856-32.196855 32.196856-17.798262 0-32.096866-14.398594-32.096866-32.196856 0-3.199688 0.899912-5.899424 1.799824-8.899131l-92.990919-53.694756c-17.698272 18.598184-42.29587 30.297041-70.093155 30.297041-53.394786 0-96.690558-43.295772-96.690557-96.690558 0-53.394786 43.295772-96.690558 96.690557-96.690557 32.796797 0 61.493995 16.298408 78.992286 41.195977l136.086711-60.494093c-0.699932-3.899619-1.299873-7.699248-1.299873-11.698857 0-35.596524 28.797188-64.493702 64.493701-64.493702 35.596524 0 64.493702 28.797188 64.493702 64.493702 0.09999 35.596524-28.697198 64.493702-64.393711 64.493702z"
            p-id="10435" fill="#5a5a5a"></path>
        </svg>
      </div>

      <div style="
          margin-right: 12px;
          width: 30px;
          height: 30px;
          display: flex;
          align-items: center;
          justify-content: center;
        " @click.stop="editcurrentNameClick()">
        <svg style="width: 20px; height: 20px" t="1683709651698" class="icon" viewBox="0 0 1024 1024" version="1.1"
          xmlns="http://www.w3.org/2000/svg" p-id="2528" width="200" height="200">
          <path
            d="M775.84 392.768l-155.2-172.352L160.768 643.264l-38.368 187.936 190.56-12.832zM929.952 229.952l-131.2-150.944-0.288-0.32a16 16 0 0 0-22.592-0.96l-131.168 120.576 155.168 172.352 128.832-118.464a15.936 15.936 0 0 0 1.248-22.24zM96 896h832v64H96z"
            p-id="2529" :fill="`${IsdarkMode ? '#5a5a5a' : '#5a5a5a'}`"></path>
        </svg>
      </div>
      <div class="resize" style="
          margin-right: 12px;
          width: 30px;
          height: 30px;
          display: flex;
          align-items: center;
          justify-content: center;
        " @click.stop="Resize()">
        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16"
          :fill="`${IsdarkMode ? '#5a5a5a' : '#5a5a5a'}`">
          <defs>
            <path id="max_svg__a" d="M0 0h16v16H0z"></path>
          </defs>
          <g>
            <mask id="max_svg__b" fill="#fff">
              <use xlink:href="#max_svg__a"></use>
            </mask>
            <g mask="url(#max_svg__b)">
              <path transform="translate(2 2)" d="m0 0 3.33 3.3" style="
                  stroke: #5a5a5a;
                  stroke-width: 1.33333;
                  stroke-opacity: 1;
                  stroke-dasharray: 0, 0;
                "></path>
              <path transform="translate(2 10.667)" d="M0 3.3 3.33 0" style="
                  stroke: #5a5a5a;
                  stroke-width: 1.33333;
                  stroke-opacity: 1;
                  stroke-dasharray: 0, 0;
                "></path>
              <path transform="translate(10.7 10.667)" d="M3.3 3.3 0 0" style="
                  stroke: #5a5a5a;
                  stroke-width: 1.33333;
                  stroke-opacity: 1;
                  stroke-dasharray: 0, 0;
                "></path>
              <path transform="translate(10.667 2)" d="M3.3 0 0 3.3" style="
                  stroke: #5a5a5a;
                  stroke-width: 1.33333;
                  stroke-opacity: 1;
                  stroke-dasharray: 0, 0;
                "></path>
              <path transform="translate(11 2)" d="M0 0h3v3" style="
                  stroke: #5a5a5a;
                  stroke-width: 1.33333;
                  stroke-opacity: 1;
                  stroke-dasharray: 0, 0;
                "></path>
              <path transform="translate(11 11)" d="M3 0v3H0" style="
                  stroke: #5a5a5a;
                  stroke-width: 1.33333;
                  stroke-opacity: 1;
                  stroke-dasharray: 0, 0;
                "></path>
              <path transform="translate(2 11)" d="M3 3H0V0" style="
                  stroke: #5a5a5a;
                  stroke-width: 1.33333;
                  stroke-opacity: 1;
                  stroke-dasharray: 0, 0;
                "></path>
              <path transform="translate(2 2)" d="M0 3V0h3" style="
                  stroke: #5a5a5a;
                  stroke-width: 1.33333;
                  stroke-opacity: 1;
                  stroke-dasharray: 0, 0;
                "></path>
            </g>
          </g>
        </svg>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: [
    "smallPhone",
    "parentisshowEdit",
    "current",
    "ReqMessagesCount",
    "OnlineCount",
    "TopTitle",
    "IsdarkMode",
    "SelectMycolor"
  ],
  data() {
    return {
      isshowEdit: this.parentisshowEdit,
      IsShowCommentInfos: false,
      ThisLoginuuId: "", //当前用户
      CommentInfos: [],
      editcurrentName: "", //编辑对话名
      CommentColseActiveIndex: -1, //移动到当前的通知消息
    };
  },
  computed: {},
  created() {
    window.addEventListener("onmessageWS", this.getsocketData); //监听webscoket消息
    this.ThisLoginuuId = localStorage.getItem("cacheLoginuuid");
  },
  mounted() {
    let cachecommentInfos = localStorage.getItem('cachecommentInfos')
    if (cachecommentInfos != null) {
      this.CommentInfos = JSON.parse(cachecommentInfos)
    }
  },
  methods: {
    goback() //返回
    {
      this.$emit("child-goback");
    },
    inputhandleChange() {
      this.$emit("child-editcurrentNameevent", this.editcurrentName);
      //console.log('333');
      //   this.Userlist.filter((r) => r.uuid == this.current.uuid)[0].currentName =
      //     this.editcurrentName;
    },
    SigCommentColse(item) //删除当前通知
    {
      console.log('item', item);

      this.CommentInfos = this.CommentInfos.filter(r => r.commentid != item.commentid)
      localStorage.setItem('cachecommentInfos', JSON.stringify(this.CommentInfos))
    },
    async getsocketData(e) {
      var objmsg = JSON.parse(e.detail.data);

      //console.log("scoket消息", objmsg);

      if (objmsg.msgType == 12) {
        this.CommentInfos.push(objmsg);

        this.CommentInfos = this.CommentInfos.sort(
          (a, b) => new Date(b.time) - new Date(a.time)
        );
        localStorage.setItem('cachecommentInfos', JSON.stringify(this.CommentInfos))
      }
    },
    OrientationJournal(
      item //定位到文章
    ) {

      //进入朋友圈
      this.$emit("child-openJournal");

      var parent = document.querySelector(".journalbox");

      // let index = this.CommentInfos.findIndex(obj => obj.commentid === item.commentid);

      // if (index !== -1) {
      //   // 删除索引为 index 的元素
      //   this.CommentInfos.splice(index, 1);
      //   localStorage.setItem('cachecommentInfos', JSON.stringify(this.CommentInfos))
      // }

      this.$nextTick(async () => {
        //先加载作品
        await this.$parent.$refs.childJournal.GetData(item.contentid);

        if (item.noticetype == 0) {
          //点赞
          this.Like(item);
          return;
        }

        var elements = document.getElementsByClassName("connector");
        while (elements.length > 0) {
          elements[0].parentNode.removeChild(elements[0]);
        }

        let commentidlist = item.commentid.split(","); //评论关联iD集合

        let scrollTop = 0;

        //使用 this.$parent.$refs.childJournal.$refs 因为 通过document.querySelector 元素选择器获取不到dom
        if (item.level == 1) {
          await this.$parent.$refs.childJournal.GetComment(item.contentid, 0, 999, item.runcommentindex);

          //basechild.style.backgroundColor = '#dcdce9'

          let thiselement = this.$parent.$refs.childJournal.$refs[
            commentidlist[1]
          ].filter((r) => r.offsetTop != 0);
          if (thiselement.length > 0) {
            thiselement[0].style.backgroundColor = "#4b6c6670";
            thiselement[0].style.borderRadius = "5px";
            //let rect = thiselement[0].getBoundingClientRect();
            scrollTop = thiselement[0].offsetTop; //rect.top + window.scrollY;
            console.log("thiselement[0]", thiselement[0]);
          }
        } else {

          let parentcommentid = commentidlist[0];

          //this.$parent.$refs.childJournal.GetComment(item.contentid,0,999);

          await this.$parent.$refs.childJournal.GetComment(item.contentid, 0, 999, item.runcommentindex);
          await this.$parent.$refs.childJournal.GetSlavecomment(
            item.contentid,
            parentcommentid, 0, 999, item.runcommentindex, item.runparentcommentindex
          );

          console.log('最后item', item);

          if (item.commentid.split(",").length == 2) {

            console.log('this.$parent.$refs.childJournal.$refs', this.$parent.$refs.childJournal.$refs);

            console.log('ids', document.getElementById(`#${commentidlist[1]}`));
            let thiselement = this.$parent.$refs.childJournal.$refs[
              commentidlist[1]
            ].filter((r) => r.offsetTop != 0);

            console.log('两个情况', commentidlist[1], thiselement);

            if (thiselement.length > 0) {
              thiselement[0].style.backgroundColor = "#4b6c6670";
              //let rect = thiselement[0].getBoundingClientRect();
              scrollTop = thiselement[0].offsetTop; //rect.top + window.scrollY;
            }
          } //三个情况
          else {
            let diffheight = 0;

            let thiselement_1_element = null;
            let thiselement_2_element = null;

            let thiselement_1 = this.$parent.$refs.childJournal.$refs[
              commentidlist[1]
            ].filter((r) => r.offsetTop != 0);
            if (thiselement_1.length > 0) {
              thiselement_1_element = thiselement_1[0];
              thiselement_1[0].style.backgroundColor = "#4b6c6670";
            }

            let thiselement_2 = this.$parent.$refs.childJournal.$refs[
              commentidlist[2]
            ].filter((r) => r.offsetTop != 0);
            if (thiselement_2.length > 0) {
              thiselement_2_element = thiselement_2[0];
              thiselement_2[0].style.backgroundColor = "#4b6c6670";
              //scrollTop =thiselement_2[0].offsetTop //rect.top + window.scrollY;

              diffheight =
                thiselement_2[0].offsetTop - thiselement_1_element.offsetTop;


            }

            let thiselement_1_hetght = thiselement_1_element.offsetHeight;
            let thiselement_2_hetght = thiselement_2_element.offsetHeight;

            console.log("第一个元素高度", thiselement_1_hetght);
            console.log("第二个元素高度", thiselement_2_hetght);

            diffheight = Math.abs(diffheight);
            console.log("连接高度", diffheight);
            //创建连线
            // 创建一个div元素

            let change_offsetTop = 0; //第一个元素距离顶部的高度

            if (
              thiselement_1_element.offsetTop > thiselement_2_element.offsetTop
            ) {
              change_offsetTop = thiselement_1_element.offsetTop;
              scrollTop = thiselement_2_element.offsetTop;
            } else {
              change_offsetTop = thiselement_2_element.offsetTop;
              scrollTop = thiselement_1_element.offsetTop;
            }

            var div = document.createElement("div");

            // 设置div的样式属性
            div.style.position = "absolute";
            div.className = "connector";
            div.style.top =
              change_offsetTop - diffheight + thiselement_2_hetght / 2 + "px";
            div.style.left = 73 + "px";
            div.style.border = "1px solid #8d8b8b";
            div.style.borderRight = "0";
            div.style.borderTopLeftRadius = "8px";
            div.style.borderBottomLeftRadius = "8px";
            div.style.height =
              diffheight -
              thiselement_2_hetght / 2 +
              thiselement_1_hetght / 2 +
              3 +
              "px";
            div.style.width = "17px";

            // 将div元素添加到页面中
            parent.appendChild(div);
          }

        }


        parent.scrollTo({
          top: scrollTop - 115,
          behavior: "smooth", // 可选，平滑滚动
        });


      });
    },
    Like(item) {
      var parent = document.querySelector(".journalbox");
      this.$nextTick(async () => {
        let scrollTop = 0;

        if (item.level == 1) { //作品点赞
          //await this.$parent.$refs.childJournal.GetData(item.contentid);
          let basechild = document.getElementById(item.contentid);
          //basechild.style.backgroundColor = '#4b6c6670'
          parent.scrollTo({
            top: basechild.offsetTop,
            behavior: "smooth", // 可选，平滑滚动
          });
          //console.log("点赞", basechild.offsetTop);
          return;
        } else {
          let commentidlist = item.commentid.split(","); //评论关联iD集合
          console.log("评论深度", commentidlist);
          let parentcommentid = commentidlist[0];

          await this.$parent.$refs.childJournal.GetComment(item.contentid, 0, 999, item.runcommentindex);
          await this.$parent.$refs.childJournal.GetSlavecomment(
            item.contentid,
            parentcommentid, 0, 999, item.runcommentindex, item.runparentcommentindex
          );
          console.log('LIKe 最后item', item);
          if (item.commentid.split(",").length == 1) {
            console.log("1个", commentidlist[0]);
            console.log(
              "document.getElementById(commentidlist[0])",
              this.$parent.$refs.childJournal.$refs[commentidlist[0]]
            );

            let thiselement = this.$parent.$refs.childJournal.$refs[
              commentidlist[0]
            ].filter((r) => r.offsetTop != 0);
            if (thiselement.length > 0) {
              thiselement[0].style.backgroundColor = "#4b6c6670";
              //let rect = thiselement[0].getBoundingClientRect();
              scrollTop = thiselement[0].offsetTop; //rect.top + window.scrollY;
              console.log("thiselement[0]", thiselement[0]);
            }
          } else if (item.commentid.split(",").length == 2) {
            //console.log("2个", commentidlist[1]);
            // console.log(
            //   "document.getElementById(commentidlist[1])",
            //   this.$parent.$refs.childJournal.$refs[commentidlist[1]]
            // );

            let thiselement = this.$parent.$refs.childJournal.$refs[
              commentidlist[1]
            ].filter((r) => r.offsetTop != 0);
            if (thiselement.length > 0) {
              thiselement[0].style.backgroundColor = "#4b6c6670";
              //let rect = thiselement[0].getBoundingClientRect();
              scrollTop = thiselement[0].offsetTop; //rect.top + window.scrollY;
              console.log("thiselement[0]", thiselement[0]);
            }
          } //三个情况
          else {
            let diffheight = 0;
            let thiselement_1_element = null;
            let thiselement_2_element = null;

            let thiselement_1 = this.$parent.$refs.childJournal.$refs[
              commentidlist[1]
            ].filter((r) => r.offsetTop != 0);
            if (thiselement_1.length > 0) {
              thiselement_1_element = thiselement_1[0];
              thiselement_1[0].style.backgroundColor = "#4b6c6670";
            }

            let thiselement_2 = this.$parent.$refs.childJournal.$refs[
              commentidlist[2]
            ].filter((r) => r.offsetTop != 0);
            if (thiselement_2.length > 0) {
              thiselement_2_element = thiselement_2[0];
              thiselement_2[0].style.backgroundColor = "#4b6c6670";
              //scrollTop =thiselement_2[0].offsetTop //rect.top + window.scrollY;

              diffheight =
                thiselement_2[0].offsetTop - thiselement_1_element.offsetTop;
              // console.log("thiselement[0]", thiselement_2[0]);
            }

            let thiselement_1_hetght = thiselement_1_element.offsetHeight;
            let thiselement_2_hetght = thiselement_2_element.offsetHeight;

            // console.log("第一个元素高度", thiselement_1_hetght);
            // console.log("第二个元素高度", thiselement_2_hetght);

            diffheight = Math.abs(diffheight);
            //console.log("连接高度", diffheight);
            //创建连线
            // 创建一个div元素

            let change_offsetTop = 0; //第一个元素距离顶部的高度

            if (
              thiselement_1_element.offsetTop > thiselement_2_element.offsetTop
            ) {
              change_offsetTop = thiselement_1_element.offsetTop;
              scrollTop = thiselement_2_element.offsetTop;
            } else {
              change_offsetTop = thiselement_2_element.offsetTop;
              scrollTop = thiselement_1_element.offsetTop;
            }

            var div = document.createElement("div");

            // 设置div的样式属性
            div.style.position = "absolute";
            div.className = "connector";
            div.style.top =
              change_offsetTop - diffheight + thiselement_2_hetght / 2 + "px";
            div.style.left = 73 + "px";
            div.style.border = "1px solid #8d8b8b";
            div.style.borderRight = "0";
            div.style.borderTopLeftRadius = "8px";
            div.style.borderBottomLeftRadius = "8px";
            div.style.height =
              diffheight -
              thiselement_2_hetght / 2 +
              thiselement_1_hetght / 2 +
              3 +
              "px";
            div.style.width = "17px";

            // 将div元素添加到页面中
            parent.appendChild(div);
          }
          //console.log("执行");
        }



        parent.scrollTo({
          top: scrollTop - 115,
          behavior: "smooth", // 可选，平滑滚动
        });

      });
    },
    ShowAIWords() {
      this.$emit("child-ShowAIWords");
    },
    editcurrentNameClick(event) {
      //this.$emit("child-editcurrentNameClick");


      this.editcurrentName = this.current.currentName;

      this.isshowEdit = true;

      setTimeout(() => {
        this.$refs.myInput.focus();
      }, 100);
    },
    Resize() {
      this.$emit("child-Resize");
    },
    formatTime(time) {
      const now = new Date();
      const target = new Date(time);
      const diff = now.getTime() - target.getTime();
      const hour = target.getHours();
      let minute = target.getMinutes();
      const day = target.getDate();
      const week = target.getDay();

      if (minute < 10) {
        minute = "0" + minute;
      }

      if (diff < 0) {
        // 未来时间
        return target.toLocaleString();
      }

      if (diff < 60 * 1000) {
        // 一分钟内
        return "刚刚";
      }

      if (diff < 60 * 60 * 1000) {
        // 一小时内
        return `${Math.floor(diff / (60 * 1000))}分钟前`;
      }

      if (diff < 24 * 60 * 60 * 1000) {
        // 一天内
        if (hour < 12) {
          return `上午 ${hour}:${minute}`;
        } else if (hour < 18) {
          return `下午 ${hour - 12}:${minute}`;
        } else {
          return `晚上 ${hour - 12}:${minute}`;
        }
      }

      if (diff < 2 * 24 * 60 * 60 * 1000) {
        // 昨天
        return `昨天 ${hour}:${minute}`;
      }

      if (diff < 7 * 24 * 60 * 60 * 1000) {
        // 一周内
        const weeks = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
        return `${weeks[week]} ${hour}:${minute}`;
      }

      if (now.getFullYear() === target.getFullYear()) {
        // 同一年
        return `${target.getMonth() + 1}月${day}日 ${hour}:${minute}`;
      } else {
        return `${target.getFullYear()}年${target.getMonth() + 1
          }月${day}日 ${hour}:${minute}`;
      }
    },
  },
};
</script>

<style>
@import "../pages/chat2.css";
/* @import url('~highlight.js/styles/github.css'); */
/* md样式 */

.msgleft3toptitle:hover {
  cursor: pointer;
}</style>